<template>
  <view class="address-container">
    <template v-if="!listData.length">
      <view class="no-address">
        <image :src="ossImg('others/address/null.png')" />
        <text>还没有添加收货地址</text>
      </view>
    </template>
    <template v-else>
      <view
        class="address-info"
        v-for="item in listData"
        :key="item.id"
        @click.stop="onChooseAddressToOrder(item)"
      >
        <view class="flex items-center">
          <view class="mr-5px text-default">{{ item.name }}</view>
          <view class="text-grey text-xs text-12px">{{ item.phone }}</view>
        </view>
        <view class="address-detail text-grey2 mt-7px leading-none">
          <view class="flex flex-1">
            <view v-if="item.defaultFlag" class="address-tag">默认</view>
            {{ addressDetail(item) }}
          </view>
          <image
            :src="ossImg('others/address/edit.png')"
            @click.stop="onViewDetail(item)"
          />
        </view>
      </view>
    </template>
    <view class="address-action">
      <!-- <button class="wechat" @click.stop="onChooseWechatAddress">
        <image :src="ossImg('others/address/wechat.png')" />
        微信地址
      </button> -->
      <view class="address-divider"></view>
      <button @click.stop="onAddAddress">
        <image :src="ossImg('others/address/create.png')" />
        新增地址
      </button>
    </view>
  </view>
 
   
</template>

<script setup>
import { ref } from "vue";
import { AddAddress, GetAddressList } from "@/services/address";
import { message, ossImg } from "@/utils/utils";
import { onShow, onLoad } from "@dcloudio/uni-app";
import privacyPopup from "@/components/privacy-popup";

const listData = ref([]);
const chooseMode = ref(false);

onShow(() => {
  getList();
  getApp().accessLogAdd();
});
onLoad((option) => (chooseMode.value = !!option.choose));

const onViewDetail = (record) => {
  uni.setStorageSync("ADDRESS_INFO", JSON.stringify(record));
  uni.navigateTo({ url: `/pages/address/detail?edit=1` });
};

const addressDetail = ({ province, city, region, detailAddress }) => {
  return province + city + region + detailAddress;
};

// 添加订单回调
const onChooseAddressToOrder = (record) => {
  if (!chooseMode.value) return;
  const pages = getCurrentPages();
  const prevPage = pages[pages.length - 2];
  prevPage.setData({
    addressId: record.id,
    addressInfo: {
      ...record,
      detail: addressDetail(record),
    },
  });
  uni.navigateBack({ delta: 1 });
};

// 前往新增地址
const onAddAddress = () => {
  uni.navigateTo({
    url: "/pages/address/detail",
  });
};

// 从微信选择地址添加
const onChooseWechatAddress = () => {
  console.log(1111111111);
  uni.chooseAddress({
    success: async (result) => {
      console.log(result);
      const {
        telNumber,
        userName,
        provinceName,
        cityName,
        countyName,
        detailInfo,
      } = result;
      await AddAddress({
        name: userName,
        phone: telNumber,
        province: provinceName,
        city: cityName,
        region: countyName,
        detailAddress: detailInfo,
        defaultFlag: false,
      });
      message("添加地址成功！");
      getList();
    },
    fail: (err) => {
      console.log(err);
    },
  });
};

// 获取收货地址列表
const getList = async () => {
  const { data } = await GetAddressList();
  listData.value = data;
};
</script>

<style lang="less" scoped>
@action-height: 60px;

.address-info {
  background-color: white;
  font-size: 14px;
  padding: 14px 20px;
  box-sizing: border-box;
  margin-bottom: 12px;

  .address-tag {
    width: 36px;
    min-width: 36px;
    height: 22px;
    line-height: 22px;
    background: #e8f0fb;
    color: #0058c6;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
    margin-right: 15px;
  }

  .address-detail {
    display: flex;
    font-size: 12px;
    line-height: 22px;

    image {
      width: 20px;
      height: 20px;
      margin-top: 1px;
    }
  }
}

.address-container {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: @action-height;
}

.no-address {
  width: 100%;
  line-height: 1;
  color: #747577;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 150px;
  box-sizing: border-box;

  image {
    width: 100px;
    height: 100px;
    display: block;
    margin-bottom: 12px;
  }
}

.address-action {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: white;
  width: 100%;
  height: @action-height;
  display: flex;
  align-items: center;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .address-divider {
    width: 1px;
    height: 48px;
    background-color: #d6d6d6;
  }

  button {
    flex: 1;
    height: 100%;
    color: #0058c6;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;

    &::after {
      border: none;
    }

    image {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    &.wechat {
      color: #04ac00;

      image {
        width: 22px;
        height: 22px;
      }
    }
  }
}
</style>
